import React from "react";

export function renderError(e?: Error | string | null) {
    const messages: string[] = []
    if (e == null) {
        messages.push('页面渲染异常！')
    } else if (typeof e === "string") {
        messages.push(e)
    } else {
        if (!e.stack) {
            messages.push('页面渲染异常！')
        } else {
            messages.push(...e.stack.split('\n').map(i => i.trim()))
        }
    }
    return <ul style={{
        backgroundColor: '#f6e7ed',
        color: '#fc1e70',
        border: 'solid 1px #fc98bd',
        borderRadius: '4px',
        padding: '16px',
        margin: '16px 0',
        listStyle: 'none',
    }}>
        {messages.map((msg, index) => (
            <li key={index} style={{paddingLeft: index === 0 ? '' : '32px'}}>
                {msg}
            </li>
        ))}
    </ul>
}